<template>
  <div>
    <!-- 二级代理没有下级代理，不能给进行代理发卡操作 -->
    <tab v-if="agentMsg.level<2" :line-width=3 active-color="#108ee9" custom-bar-width="50%" v-model="usertype">
      <tab-item @on-item-click="tabSwitch">发卡记录(玩家)</tab-item>
      <tab-item @on-item-click="tabSwitch">发卡记录(代理)</tab-item>
    </tab>
    <group>
      <div v-if="usertype==0">
        <datetime title="开始日期" v-model="beginTime" end-date="" format="YYYY-MM-DD"></datetime>
        <datetime title="结束日期" v-model="endTime" format="YYYY-MM-DD"></datetime>
        <agent-button @btnClick="searchClick">查询</agent-button>
      </div>
      <div class="form_box" v-else>
        <div class="user_box">
          <label for="cardNumber">代理ID: </label>
          <input type="number" placeholder="请输入代理ID" name="agentid" ref="agentid">
        </div>
        <x-button class="buy_btn" type="submit" @click.native="getAgentRecord">查询</x-button>
      </div>
    </group>
    <group class="table_box"> 
      <x-table full-bordered style="background-color:#fff;font-size: .25rem;">
        <thead>
          <tr>
            <th>{{usertype==0?'玩家昵称':'代理昵称'}}</th>
            <th>{{usertype==0?'玩家ID':'代理ID'}}</th>
            <th>{{usertype==0?'房卡(张)':'房卡(张)'}}</th>
            <th>{{usertype==0?'时间':'详情(点击查看)'}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(record,index) in recordList" :key="index">
            <td>{{usertype==0?record.receive_name:record.nickname}}</td>
            <td>{{usertype==0?record.receive_id:record.receive_id}}</td>
            <td>{{usertype==0?record.cardnum:record.cardnum}}</td>
            <td>
              <span v-if="usertype==0">{{record.receive_time}}</span>
              <x-button v-else class="td_btn" type="primary" :mini="true" :link="`agentRecordDec?agentid=${record.receive_id}`">查看</x-button>
            </td>
          </tr>
        </tbody>
      </x-table>
      <div v-if="usertype==0" class="table_btn">
        <button @click="getUpPage()">上一页</button>
        <button @click="nextPage()">下一页</button>
      </div>
    </group>
  </div>
</template>
<script>
import {
  Datetime,
  Group,
  dateFormat,
  Tab,
  TabItem,
  XButton,
  XTable
} from "vux";
import AgentButton from "../../../components/common/AgentButton.vue";
export default {
  data() {
    return {
      usertype: 0, //用于控制代理与玩家的标识 0 玩家 1代理
      agentMsg: {}, //代理等级，默认为二级代理
      recordList: [], //记录数据
      pagesize: 10, //每页显示条数
      page: 1, //当前页码
      maxPage: 0, //最大页数
      beginTime: dateFormat(new Date(), "YYYY-MM-DD"),
      endTime: dateFormat(new Date(), "YYYY-MM-DD")
    };
  },
  created() {
    //获取代理等级二级代理不能给下级代理发卡
    this.getAgentMsg();
    this.getPlayerRecord(this.pagesize, this.page);
  },
  filters: {
    dateFormat
  },
  components: {
    Datetime,
    Group,
    AgentButton,
    Tab,
    TabItem,
    XButton,
    XTable
  },
  methods: {
    tabSwitch() {
      if (this.usertype === 0) {
        // 拿玩家相关的tab数据
        this.getPlayerRecord(this.pagesize, this.page);
      } else if (this.usertype === 1) {
        // 拿玩家相关的tab数据
        this.getAgentRecord(this.pagesize, this.page);
      }
    },
    getAgentMsg() {
      this.apiService.user.userinfo().then(res => {
        this.agentMsg = res.data;
      });
    },
    getPlayerRecord(pagesize, page) {
      this.apiService.user
        .cardplayerrecordlist({
          starttime: this.beginTime,
          endtime: this.endTime,
          pagesize: pagesize,
          currentpage: page
        })
        .then(res => {
          this.maxPage = Math.ceil(res.data.total / 10);
          this.recordList = res.data.cardplayerrecordlist;
          this.recordList.map(item => {
            item["receive_time"] = dateFormat(
              new Date(item["receive_time"] * 1000),
              "YYYY-MM-DD hh:mm:ss"
            );
          });
        });
    },
    getAgentRecord(pagesize, page) {
      this.apiService.user
        .cardagentrecordlist({
          agentid: this.$refs.agentid.value,
          pagesize: pagesize,
          currentpage: page
        })
        .then(res => {
          this.maxPage = Math.ceil(res.data.total / 10);
          this.recordList = res.data.cardagentrecordlist;
        });
    },
    searchClick() {
      this.getPlayerRecord(this.pagesize, this.page);
    },

    //上一页
    getUpPage() {
      if (this.page > 1) {
        this.page--;
        this.getPlayerRecord(this.pagesize, this.page);
      }
    },
    //下一页
    nextPage() {
      if (this.page < this.maxPage && this.maxPage != 0) {
        this.page++;
        this.getPlayerRecord(this.pagesize, this.page);
      }
    }
  }
};
</script>
<style scoped>
.form_box {
  padding: 0.5rem 0.8rem 0.2rem;
}
.form_box div {
  margin-bottom: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form_box div label {
  width: 30%;
  padding-right: 0.2rem;
  text-align: right;
  font-size: 0.27rem;
  color: rgb(139, 139, 139);
}
.form_box div input {
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  padding: 0 0.3rem;
  color: inherit;
  width: 70%;
  height: 0.8rem;
  line-height: 0.8rem;
}
.buy_btn {
  width: 35%;
  margin-top: 0.4rem;
  font-size: 0.3rem;
  background: #108ee9;
}
.tab_box {
  font-size: 0.25rem;
}
.table_btn {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0.4rem 0;
}
.table_btn button {
  color: #0085e7;
  font-size: 0.32rem;
}
.td_btn {
  line-height: 0.45rem;
  margin-bottom: 0.025rem;
}
</style>
